<template>
  <el-dialog  :visible.sync="isShow" center class="waitingAccepting-info">
    <h1 class="waitingAccepting-info_title">{{orderData.order_number}}</h1>
    <a id="JS_DOWNLOAD" href="" ref="JS_DOWNLOAD"></a>
    <el-form :model="orderData"  class='form'>
      <el-row type="flex">
        <el-col :span="12">
          <el-form-item  label="专利名称:">
            <span>{{orderData.patent_name}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="专利类型:">
            <span>{{orderData.type}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="12">
          <el-form-item  label="订单状态:">
            <span :color='orderData.status == "已撤案" ? "red" : "green"'>{{orderData.status}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="联络人:">
            <span>{{orderData.liaisons}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="12">
          <el-form-item  label="联络人邮箱：">
            <span >{{orderData.liaisons_email}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="联络人电话：">
            <span>{{orderData.liaisons_tel}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="12">
          <el-form-item  label="代理人：">
            <span 
              v-if="orderData.agent"
              :color="orderData.agent.type =='离职'?'red':'green'">{{orderData.agent | agentNumAddName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="专属顾问">
            <span class="font_success" v-if='orderData.process'>{{orderData.process | processNumber}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="24">
          <el-form-item  label="技术问题：">
            <span >{{orderData.problem}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="24">
          <el-form-item  label="技术方案：">
            <span >{{orderData.plan}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="24">
          <el-form-item  label="项目优势：">
            <span >{{orderData.advantage}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="24">
          <el-form-item  label="备注：">
            <span >{{orderData.remarks}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="12">
          <el-form-item  label="附图：">
            <div v-if="orderData.img != '' || orderData.img != null" class="preview-img-wrap">
              <pre-img
                :smallImg="orderData.imgList"
                :bigImg="orderData.imgList2"
                class="pre-img">
              </pre-img>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="附件">
            <div  v-if="orderData.file != '' || orderData.file != null" style="height: 40px;-webkit-display:flex;
              display:flex;
              -webkit-align-items:center;
              align-items:center;">
              <a v-for="item in orderData.fileArr" :key="item.id" :href="baseUrl + '/api/download?path='  + item.file +'/'+ item.path"
              :download="item.path" :title="item.path" class="el-icon-tickets file_sh"></a>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="btns tc">
      <template v-if="$store.state.user.is_teacher == 1">
        <el-button v-no-more-click:3000 type="danger" size="small" @click.stop="orderTaking(orderData)">自己接单</el-button>
        <el-button v-no-more-click:3000 type="warning" class='mt10' size="small" @click.stop="distributeOrder(orderData)">分配订单</el-button>
      </template>
			<el-button type="danger" class="mt10" @click.stop="orderTaking(orderData)"  v-else-if='$store.state.user.is_teacher == 3'>接单</el-button>
    </div>
    <!-- 导师分配徒弟接单 -->
		<distributeOrder ref='distributeOrder' @refresh='refresh' @download='download'></distributeOrder>

    <!-- 修改资料 -->
		<editDialog ref="editInfo"></editDialog>
  </el-dialog>
</template>

<script>
import preImg from '~/components/pre-img'
import distributeOrder from './distributeOrder'
import {
  orderTaking,
  downloadedOrderWord
} from "~/api/order";
import editDialog from "~/components/editDialog"; //修改邮箱弹出层
export default {
  components: {
    preImg,
    distributeOrder,
    editDialog
  },
  data () {
    return {
      isShow: false,
      orderData: {
        oorder_number:'',
        patent_name:'',
        type:'',
        status: ''
      },
      order_id: null,
      baseUrl: global.baseurl,
      downloadDOM: ''
    }
  },
  mounted () {
    this.downloadDOM = document.getElementById('JS_DOWNLOAD')
  },
  methods: {
    show (data) {
      this.order_id = data.id
      this.getInfo()
      this.isShow = true
    },
    getInfo() {
      let params = {
        order: this.order_id
      }
      this.$axios.get(`api/order/${this.order_id}`, {params: params}).then (res => {
        if (res.data.code == 200) {
          this.interceptFile(res.data.data)
          this.orderData = res.data.data
        }
      })
    },
    interceptFile (data) {
      //图片 切分组件
      if (data.thumb_imgs == null || data.thumb_imgs == "") {} else {
        let img_Arr = data.thumb_imgs.split("&");
        let img_Arr2 = data.img.split('&')
        data.imgArr = [];
        data.imgList = [];
        data.imgList2 = []
        for (const i in img_Arr2) {
          data.imgList2.push(global.baseurl + '/storage/upload/' + img_Arr2[i])
        }
        for (const i in img_Arr) {
          let itemobj = {
            id: i + 1,
            path: img_Arr[i],
            file: ''
          };
          data.imgList.push(global.baseurl + '/storage/upload/' + img_Arr[i])
          let itemArr = itemobj.path.split("/")
          itemobj.path = itemArr[itemArr.length - 1]
          itemobj.file = itemArr.slice(0, 2).join("/");
          data.imgArr.push(itemobj);
        }
      }

      //文件 切分组件
      if (data.file == null || data.file == "") {} else {
        let file_Arr = data.file.split("&");
        data.fileArr = [];
        for (const i in file_Arr) {
          let itemobj = {
              id: i + 1,
              path: file_Arr[i],
              file: ''
          };
          let itemArr = itemobj.path.split("/")
          itemobj.path = itemArr[itemArr.length - 1]
          itemobj.file = itemArr.slice(0, 2).join("/");
          data.fileArr.push(itemobj);
        }
      }
    },
    refresh(data) {
      this.$emit("refresh");
      this.isShow = false
    },
    async download(id) {
      let data = await downloadedOrderWord(this.$axios, id)
      if (data.status == 200) {
        // this.downloadDOM.href = data.config.url
        // this.downloadDOM.click()
        this.$refs['JS_DOWNLOAD'].href = data.config.url
        this.$refs['JS_DOWNLOAD'].click()
      }

    },
    // 代理接单
    orderTaking(val) {
      let agentObj = this.$store.state.user;
      if (
        agentObj.email_work == "undefined" ||
        agentObj.email_work == null ||
        agentObj.email_work == ""
      ) {
        this.$alert("您还没有工作邮箱，请先修改资料", "提示", {
          confirmButtonText: "确定",
          center: true,
          callback: action => {
            this.$refs.editInfo.showDialog();
          }
        });
      } else {
        this.$confirm("确认接单吗", "提示", {
            cancelButtonText: "取消",
            confirmButtonText: "确定",
            center: true,
            type: "warning"
          })
          .then(() => {
            let obj = {
              order: val.id,
              agent: this.$store.state.user.id
            };
            orderTaking(this.$axios, obj)
              .then(({
                data
              }) => {
                if (data.status == "success") {
                  this.$confirm('请在接单后的<i class="font_danger">25</i>天内完成订单，如案件撰写超时，案件结算时将按<i class="font_danger">20</i>元/天扣费！！是否下载接单文件？', '接单成功!', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    dangerouslyUseHTMLString: true,
                    center: true,
                  }).then ( () => {
                    this.download(val.id)
                  }).catch(() => {

                  })
                  this.refresh()
                } else {
                  // this.$message({
                  // 	type: "error",
                  // 	message: data.message
                  // })

                  this.$alert(data.message, '提示', {
                    confirmButtonText: '确定',
                    center: true,
                    callback: action => {
                    }
                  })
                }
              })
              .catch(err => {
                this.refresh()
              });
          })
          .catch(() => {
          });
				}
    },
    distributeOrder(data) {
      this.$refs['distributeOrder'].show(data)
    },
     
  }
}
</script>

<style lang='less' scoped>
  .waitingAccepting-info {
    &_title {
      text-align: center;
      font-size:20px;
      font-weight:bold;
      color:rgba(53,53,53,1);
      margin-bottom: 20px;
    }
    /deep/.el-dialog {
      min-width: 600px;
      .el-dialog__close {
        font-size: 20px;
      }
      .el-dialog__body {
        padding-top: 10px;
      }
    }
   
    .el-form-item__content {
      text-align: center;
      font-size:20px;
      font-weight:bold;
      color:rgba(53,53,53,1);
      margin-bottom: 20px;
    }
    
    
    /deep/.form {
      .el-form-item {
        height: 100%;
        border: 1px solid #ccc;
        margin-right: -1px;
        margin-bottom: -1px;
        // border-bottom-width: 0;
        .el-form-item__label {
          // background:rgba(194,227,255,1);
          text-align: left;
          font-size:15px;
          color:#555555;
          padding-left: 20px;
        }
        .el-form-item__content{
          // background:rgba(244,247,255,1);
          padding-left: 20px;
          text-align: left;
          color:#555555;
        }
      }
      .el-row {
        .el-col-12 {
          .el-form-item {
            border-bottom-width: 0;
          }
        }
        .el-col-24 {
          .el-form-item {
            border-bottom: 0px;
          }
        }
      }
      .el-row:last-child  {
        .el-col-12 {
          .el-form-item {
            border-bottom-width: 1px;
          }
        }
      }
      .pre-img {
        margin-top: 8px;
      }
    }
      
  }

</style>